<template>
<div class="mypersion">
    <Down/>
    <div style="text-align: center;margin-top:100px">
        <span class="span" style="margin-left:0px" @click="ChangePsw">修改密码</span>
        <span class="span" @click="ChangeInfo">我的资料</span>
        <span class="span" @click="AddAddress">收货地址</span>
    </div>
    <ImgBackground class="img_background" :style="ShowLater?'opacity:1':'opacity:0'"></ImgBackground>
    <router-view></router-view>
</div>
</template>

<script>
import ImgBackground from './img_background.vue'
import Down from '../../common/down.vue'
export default {
    name:'persion',
    components:{Down,ImgBackground},
    data(){
        return{
            ShowLater:0,
        }
    },
    mounted(){
        setTimeout(() => {
            this.ShowLater=1
        }, 300);
        this.$bus.$emit('Downimgshow','persion')
    },
    methods:{
        ChangePsw(){this.$router.push({name:'checkpsw'})},
        ChangeInfo(){this.$router.push({name:'infoshow'})},
        AddAddress(){this.$router.push({name:'addressShow'})}
    },
}
</script>

<style scoped>
.mypersion{
    left: 0;
    top: 0;
    position: fixed;
    height: 100%;
    width: 100%;
}
.span{
    background-color: rgb(255, 222, 90);
    padding: 15px;
    border-radius: 12px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 15px;
}
.img_background{
    position: fixed;
    z-index: -1;
    left: 0;
    margin-top: 100px;
    transition: opacity .8s ease-out;
}
</style>